<template>
    <div data-tauri-drag-region class="header" :class="{ 'header-collapse': !sidebar.collapse }">
        <!-- 折叠按钮 -->
        <div class="header-left">
            <img class="logo" data-tauri-drag-region src="../assets/img/logo1.png" alt="" />
            <div data-tauri-drag-region class="web-title">鑫普乐康</div>
        </div>
        <div class="header-right">
            <div class="window-btn">
                <el-icon size="16" @click="hideScreen" class="icon-font"><Minus  /></el-icon>
                <el-icon size="16" @click="setFullScreen" class="icon-font icon-btn"><FullScreen  /></el-icon>
                <el-icon size="16" @click="closeScreen" class="icon-font"><CloseBold  /></el-icon>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRouter } from 'vue-router';
import { Window } from '@tauri-apps/api/window';

const username: string | null = localStorage.getItem('vuems_name');
const message: number = 2;
const window = Window.getCurrent();

const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
    sidebar.handleCollapse();
};

onMounted(() => {
    if (document.body.clientWidth < 1500) {
        collapseChage();
    }
});

// 用户名下拉菜单选择事件
const router = useRouter();

const setFullScreen = async() => {
    await window.toggleMaximize();
};
const hideScreen = async () => {
    await window.minimize();
}
const closeScreen = async () => {
    await window.close();
}
</script>
<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: calc(100% - 65px);
    height: 70px;
    color: var(--header-text-color);
    background-color: var(--header-bg-color);
    border-bottom: 1px solid #ddd;
    margin-left: 65px;
}

.header-collapse {
    position: relative;
    left: var(--sidebar-width-default);
    width: calc(100% - var(--sidebar-width-default));
    margin-left: 0px;
}

.header-left {
    display: flex;
    align-items: center;
    /* padding-left: 20px; */
    height: 100%;
}

.logo {
    width: 35px;
    height: 35px;
}

.web-title {
    margin: 0 10px 0 10px;
    font-size: 22px;
    user-select: none;
}

.collapse-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    opacity: 0.8;
    font-size: 22px;
}

.collapse-btn:hover {
    opacity: 1;
}

.header-right {
    float: right;
    padding-right: 20px;
}

.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}

.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}

.btn-icon {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--header-text-color);
    margin: 0 5px;
    font-size: 20px;
}

.btn-bell-badge {
    position: absolute;
    right: 4px;
    top: 0px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: var(--header-text-color);
}

.user-avator {
    margin: 0 10px 0 20px;
}

.el-dropdown-link {
    color: var(--header-text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.el-dropdown-menu__item {
    text-align: center;
}

.window-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.icon-font {
    cursor: pointer;
}

.icon-btn {
    margin: 0 18px;
}

</style>
